<template>
    <div class="message-wrapper">
        <InfoHeader v-if="history" />
        <TabHeader v-else />
        <div class="message-box">
            <div v-for="item in list" :key="item.id" :class="['message-item', item.type === 1 ? 'right' : 'left']">
                <Avatar shape="square" :size="48" :src="item.avatar" />
                <div class="info">
                    <div class="user">
                        <div class="name">微信昵称</div>
                        <div class="from">@微信</div>
                    </div>
                    <div class="content">
                        <div class="txt">
                            {{ item.text }}
                        </div>
                    </div>
                </div>
                <span class="icon-wrapper">
                    <a-dropdown>
                        <EllipsisOutlined :style="{fontSize: '24px'}" class="icon" />
                        <template #overlay>
                            <a-menu>
                                <a-menu-item @click="handleCopy(item)">复制</a-menu-item>
                                <a-menu-item @click="handleQuote(item)">引用</a-menu-item>
                                <a-menu-item @click="handleTransmit(item)">转发</a-menu-item>
                                <a-menu-item @click="handleMany(item)">多选</a-menu-item>
                                <a-menu-item @click="handleAdd(item)">添加</a-menu-item>
                            </a-menu>
                        </template>
                    </a-dropdown>
                </span>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import {Avatar} from "ant-design-vue";
import {EllipsisOutlined} from "@ant-design/icons-vue";
import InfoHeader from "./InfoHeader.vue";
import TabHeader from "./TabHeader.vue";

const {history} = defineProps({
    history: {
        type: Boolean,
        default: true,
        required: true,
    },
});

const item = {
    avatar: "https://wework.qpic.cn/wwpic3az/318264_HVy9hWr1Rm2cZBD_1724924136/0",
};

const list = new Array(20)
    .fill("")
    .map((_, id) => ({...item, id, type: id % 2, text: new Array(id * 100).fill("*").join("")}));

const handleCopy = item => {};
const handleQuote = item => {};
const handleTransmit = item => {};
const handleMany = item => {};
const handleAdd = item => {};
</script>

<style scoped lang="less">
.message-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .message-box {
        background-color: #fafafa;
        flex: 1;
        width: 100%;
        padding: 12px;
        overflow-y: scroll;
        padding-bottom: 16px;
        .message-item {
            margin-top: 12px;
            display: flex;
            cursor: pointer;
            .img {
                width: 40px;
                height: 40px;
            }

            .info {
                display: flex;
                flex-direction: column;
                .user {
                    display: flex;
                    align-items: center;
                    .name {
                        color: #000;
                    }
                    .from {
                        font-size: 12px;
                        color: #19af19;
                    }
                }

                .content {
                    margin-top: 12px;
                    line-height: 28px;
                    padding: 12px;
                    background-color: #fff;
                    width: max-content;
                    border-radius: 4px;
                }
                .txt {
                    font-size: 12px;
                    color: #888999;
                    line-height: 16px;
                    margin-top: 2px;

                    width: 300px;
                    height: max-content;
                    white-space: normal; /* 允许换行 */
                    overflow-wrap: break-word; /* 在必要时单词内部断行 */
                }
            }
            .icon-wrapper {
                padding-top: 16px;
                margin-left: 4px;
                display: none;
            }
        }
        .message-item:hover {
            .icon-wrapper {
                display: block !important;
            }
        }
        .right {
            flex-direction: row-reverse;
            .info {
                margin-right: 18px;
                .user {
                    flex-direction: row-reverse;
                    .from {
                        margin-right: 8px;
                    }
                }
            }
            .icon-wrapper {
                margin-right: 4px;
            }
        }
        .left {
            flex-direction: row;
            .info {
                margin-left: 18px;
                .user {
                    flex-direction: row;
                    .from {
                        margin-left: 8px;
                    }
                }
            }
        }
    }
}
</style>
